{% extends "manage/layout.html" %}

{% set page_title = '机构地图' %}

{% block content %}
<style type="text/css">
body>.container{
    top:125px;
    left:255px;
    /*width:100vw;*/
}
</style>
<div id="map" style="width:100%;height:100vh;">
    <div id="school_map" style="height:100%;">
    </div>
</div>
{% endblock %}
{% block js %}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cv7iqQebH4ZN61DhRxfPSso7"></script>
<script type="text/javascript">
var points = {{ location_info|tojson }};
</script>
<script type="text/javascript">
var map = new BMap.Map("school_map");          // 创建地图实例  
map.enableScrollWheelZoom();
var point = new BMap.Point(110.404, 35.915);  // 创建点坐标  
var opts = {
                width : 400,     // 信息窗口宽度
                height: 90,     // 信息窗口高度
                enableMessage:false//设置允许信息窗发送短息
               };
map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别  
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
for (var i = 0; i < points.length; i++){
    var p = points[i];
    var marker = new BMap.Marker(new BMap.Point(p.lng, p.lat));
    marker.addEventListener('dblclick', function(){
        map.centerAndZoom(this.getPosition(), 15);
    });
    get_infowindow_content(p.id, marker);
    map.addOverlay(marker);
}
function get_infowindow_content(school_id, marker){
    marker.addEventListener('click', function(e){
        process_content(school_id, e);
    });
}
function process_content(school_id, e){
    var url = '/manage/statistics/school/' + school_id;
    $.get(url,function(data){
        render_html(data, e)
    }, "json" );
    
}
function render_html(data, e){
    var content = '<p>'+ data.school_name + 
        '<a href="/manage/statistics/session_list/'+ data.school_id +'" target="_blank" style="margin-left:10px"><span class="glyphicon glyphicon-time" title="查看时间轴"></span></a>'+
        '<a href="/manage/schools/'+ data.school_id +'/show" style="margin-left:10px" target="_blank"><span class="glyphicon glyphicon-log-in" title="跳转"></span></a>'+
        '</p>' +
        '<p>' +
            '<span>上课次数： '+ data.session_total +'</span>'+
            '<span style="margin-left: 20px">结课次数： '+ data.session_end +'</span>'+
        '</p>'+
        '<p>'+
            '<span>学生人数： '+ data.stu_num +'</span>'+
            '<span style="margin-left: 20px">绑定微信数量： '+ data.bind_num +'</span>'+
        '</p>'+
        '<p>最后上课时间： '+ data.recent +' '+ data.weekday +'</p>';
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
    map.openInfoWindow(infoWindow,point); //开启信息窗口
}
</script>
{% endblock %}
